<!--
 * @Author: 王灿
 * @Date: 2019-11-09 15:07:03
 * @Description: 分页
 -->
<template>
  <div class="jq-page">
    <el-pagination
      background
      @size-change="onHandleSizeChange"
      @current-change="onHandleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>


<script>
export default {
  name: 'JqPage',
  data() {
    return {
      params: {
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
    }
  },
  props: {
    // 总数量
    total: {
      type: Number,
      default: 0
    },
    pageNum: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    }
  },
  methods: {
    // pageSize
    onHandleSizeChange(val) {
      this.params.pageSize = val
      this.$emit('changePageNum', this.params)
    },
    // pageNum
    onHandleCurrentChange(val) {
      this.params.pageNum = val
      this.$emit('changePageNum', this.params)
    }
  }
}
</script>

<style lang="scss" scoped>
.jq-page {
  height: 40px;
  font-size: 12px;
  @include row;
  justify-content: flex-end;
  background: #fff;
  box-shadow: 0 -2px 2px #ececec;
}
</style>

<style lang="scss">
.jq-page {
  .el-select-dropdown__item {
    &.selected {
      color: $base-font-color !important;
    }
  }
}
</style>
